﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Audio Player</title>
    <link type="text/css" rel="stylesheet" href="audioplayer.css" />
    <script type="text/javascript" src="/js/layout.js"></script>
    <script type="text/javascript" src="audioplayer.js"></script>
</head>
<body>
    <div class="player">
        <audio data-bind="audio:{}" controls="true"></audio>
        <div>
            <input data-bind="value:Src" type="text" placeholder="文件路径" />
            <input data-bind="value:LyricSrc" type="text" placeholder="歌词路径" />
            <input data-bind="value:Url" type="text" style="width: 93%;" placeholder="智能解析" />
            <input data-bind="click:Parse" type="button" value="解析" />
        </div>
        <div>
            <label>
                时间
            </label>
            <span data-bind="text:FormattedStart"></span>--<span data-bind="text:FormattedEnd"></span>
            <label>
                <input data-bind="checked:Loop" type="checkbox" />循环
            </label>
            <input data-bind="click:Play" type="button" value="播放" />
            <input data-bind="click:Pause" type="button" value="停止" />
        </div>
        <div class="range" data-bind="slider:{}">
        </div>
    </div>
    <div data-bind="foreach:CurrentLyric">
        <div data-bind="text:text,css:{currentLyric:$index()==$parent.CurrentIndex()}">
        </div>
    </div>
</body>
</html>
